<!DOCTYPE html>
<html lang="en">
	<head>
		<title>web BIM</title>
		<meta charset="utf-8" />
		<meta
			name="viewport"
			content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
		/>
		<link type="text/css" rel="stylesheet" href="css/main.css" />
		<script src="build/three.min.js"></script>
		<script src="build/OrbitControls.js"></script>
		<script src="jsm/loaders/ifc/web-ifc-api.js"></script>
		<script src="jsm/loaders/IFCLoader.js"></script>
	</head>

	<body>
		<div id="info">
			<div class="text-success">
				<span class="sr-only">web BIM show</span><br/>
				<script type="text/javascript" src="//rf.revolvermaps.com/0/0/3.js?i=58x4kn61rqm&amp;b=0&amp;s=40&amp;m=2&amp;cl=ffffff&amp;co=010020&amp;cd=aa0000&amp;v0=60&amp;v1=60&amp;r=1" async="async"></script>
				<script>
					var _hmt = _hmt || [];
					(function() {
					  var hm = document.createElement("script");
					  hm.src = "https://hm.baidu.com/hm.js?c92893cdabb11ad8ca139c33152761e2";
					  var s = document.getElementsByTagName("script")[0]; 
					  s.parentNode.insertBefore(hm, s);
					})();
				</script>
			</div>
		</div>

		<script type="module">
			let scene, camera, renderer,controls;
			var clock = new THREE.Clock();

			init();

			function init() {
				//Scene
				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0x8cc7de );

				//Camera
				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );
				camera.position.z = - 70;
				camera.position.y = 25;
				camera.position.x = 90;

				//Initial cube
				const geometry = new THREE.BoxGeometry();
				const material = new THREE.MeshPhongMaterial( { color: 0xffffff } );
				const cube = new THREE.Mesh( geometry, material );
				scene.add( cube );

				const geometry2 = new THREE.SphereGeometry( 15, 32, 32 );
				const material2 = new THREE.MeshBasicMaterial( {color: 0xffff00} );
				const sphere = new THREE.Mesh( geometry2, material2 );
				scene.add( sphere );

				//Lights
				const directionalLight1 = new THREE.DirectionalLight( 0xffeeff, 0.8 );
				directionalLight1.position.set( 1, 1, 1 );
				scene.add( directionalLight1 );

				const directionalLight2 = new THREE.DirectionalLight( 0xffffff, 0.8 );
				directionalLight2.position.set( - 1, 0.5, - 1 );
				scene.add( directionalLight2 );

				const ambientLight = new THREE.AmbientLight( 0xffffee, 0.25 );
				scene.add( ambientLight );

				//Setup IFC Loader
				const ifcLoader = new IFCLoader();
				ifcLoader.setWasmPath('');//这里要万分注意
				ifcLoader.load( 'models/rac_advanced_sample_project.ifc', function ( model ) {
					scene.add( model );
					render();
					console.log("model:",model);
				} );

				//Renderer
				renderer = new THREE.WebGLRenderer( { antialias: true	} );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.setPixelRatio( window.devicePixelRatio );
				document.body.appendChild( renderer.domElement );

				//Controls
				const controls = new THREE.OrbitControls( camera, renderer.domElement );
				
				controls.addEventListener( 'change', render );

				window.addEventListener( 'resize', onWindowResize );

				render();

			}

			function onWindowResize() {
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
				renderer.setSize( window.innerWidth, window.innerHeight );

				render();
			}

			function render() {
				renderer.render( scene, camera );
			}

		</script>
	</body>
</html>
